<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<title>Bootstrap 模板</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<!-- 设置字符编码集为国际编码 -->
		<meta charset="utf-8">
		<!-- IE兼容模式 通知 IE 采用其所支持的最新的模式 -->
		<meta http-equiv="X-UA-Compatible" content="IE=Edge">
		<link rel="stylesheet" href="animate.css" />
		<link rel="stylesheet" href="maxModal.css" />
		<style type="text/css">
			html,body {
				margin: 0;
				padding: 0;
				height: 100%;
			}
			ul {
				height: 100%;
			}
			ul,li {
				margin: 0;
				padding: 0;
				list-style: none;
			}
			.flexPar {
				display: flex;
				height: 100%;
			}
			.flexLeft {
				flex: 0 100px;
				height: 100%;
				align-self: center;
			}
			.flexRight {
				flex: 1;
				height: 100%;
			}
		</style>
   	</head>
	<body>
		<div class="flexPar">
			<div class="flexLeft">
				<ul>
					<li class="jq-iframe">iframe</li>
					<li class="jq-wating">wating</li>
					<li class="jq-alert">alert</li>
					<li class="jq-confirm">confirm</li>
					<li class="jq-propot">propot</li>
					<li class="jq-tips">tips</li>
				</ul>
			</div>
			<div class="flexRight">
				<ul>
					<li><iframe src="maxIframe_main.html" width="100%" height="100%"></iframe></li>
				</ul>
			</div>
		</div>
		
		<script type="text/javascript" src="../js/jquery-1.11.3.min.js" ></script>
		<script type="text/javascript" src="maxModal.v0.8.js" ></script>
		<script>
			var maxIframeFlag = 'maxIframe';
			$(function(){
				$(".jq-iframe").on("click",function(){
					console.log('maxIframe.html ...')
					$.MaxDialog({
						type:'iframe',
						width: "80%",
						height: "80%",
						data:{
							"msg":'parent page'
						},
						esc: true,
						url:"maxIframe_child_1.html",
					})
				});
				$('.jq-alert').on("click",function(){
					console.log('maxIframe.html ...')
					$.MaxDialog({
						type:'alert',
						width: "80%",
						height: "80%",
						data:{
							"msg":'parent page'
						},
						esc: true,
						content:"maxIframe_child_1.html",
						showAfter: function(obj,a){
							console.log('obj:',obj)
							console.log('a:',a)
						}
					})
				});
			});
			
		</script>
	</body>
</html>
